<template>
  <el-main>
    <el-form :inline="true" :model="formTermination" class="demo-form-inline">
      <el-form-item label="解约协议编号">
        <el-input v-model="formTermination.sfTerminationNo" size="mini" placeholder="请输入收房合同编号"></el-input>
      </el-form-item>
      <el-form-item label="小区名称">
        <el-input v-model="formTermination.premiseName" size="mini" placeholder="请输入小区名称"></el-input>
      </el-form-item>
      <el-form-item label="录入人">
        <el-input v-model="formTermination.inputUserName" size="mini" placeholder="请输入录入人姓名"></el-input>
      </el-form-item>
      <el-form-item label="协议录入日期">
        <el-date-picker
          v-model="formTermination.startDate"
          value-format="yyyy-MM-dd"
          size="mini"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="至">
        <el-date-picker
          v-model="formTermination.endDate"
          value-format="yyyy-MM-dd"
          size="mini"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <template>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="sfTerminationNo" label="解约合同编号" ></el-table-column>
        <el-table-column prop="premiseName" label="小区" ></el-table-column>
        <el-table-column prop="terminationType" label="解约类型" :formatter="typeFormat"></el-table-column>
        <el-table-column prop="terminationDate" label="解约日期" ></el-table-column>
        <el-table-column prop="auditDate" label="审核日期" ></el-table-column>
        <el-table-column prop="finalStatement" label="结算金额" ></el-table-column>
        <el-table-column prop="inputDate" label="录入日期" ></el-table-column>
        <el-table-column prop="inputUserName" label="操作人" ></el-table-column>
      </el-table>
    </template>
    <el-pagination
      @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="formTermination.pageNum"
    :page-sizes="[2, 4, 5, 8]"
    :page-size="formTermination.pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="formTermination.total">
    </el-pagination>
  </el-main>
</template>

<script>
  import { getSfTerminationList } from "@/api/shoufang/jieyue";
  export default {
    name: "jieyuequery",
    data(){
      return{
        tableData:[],
        formTermination:{
          pageNum:1,
          pageSize:5
        },
      typeOptions:[]
      }
    },
    methods:{
      // 操作日志类型字典翻译
      typeFormat(row, column) {
        return this.selectDictLabel(this.typeOptions, row.terminationType);
      },
      onSubmit() {
        this.getList();
      },
      handleCurrentChange(value) {
        this.formTermination.pageNum=value;
        this.getList();
      },
      handleSizeChange(value) {
        this.formTermination.pageSize=value;
        this.getList();
      },
      getList() {
        getSfTerminationList(this.formTermination).then(res=>{
          console.log(res);
          this.tableData=res.rows;
          this.formTermination.total=res.total;
        })
      }
    },
    created() {
      this.getList();
      this.getDicts("termination_type").then(response => {
        this.typeOptions = response.data;
      });
    }
  }
</script>

<style scoped>

</style>
